<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">场地</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="outTradeNo">订单号</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="outTradeNo" nz-input formControlName="outTradeNo" placeholder="请输入订单号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">订单类型</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="订单类型" formControlName="orderType">
              <nz-option nzLabel="不限" nzValue="0"></nz-option>
              <nz-option nzLabel="普通订单" nzValue="1"></nz-option>
              <nz-option nzLabel="活动订单" nzValue="2"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">分账类型</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="分账类型" formControlName="ledgerType">
              <nz-option nzLabel="不限" nzValue="0"></nz-option>
              <nz-option nzLabel="普通分账" nzValue="1"></nz-option>
              <nz-option nzLabel="抖音美团核销手续费" nzValue="2"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="outTradeNo">收款商户</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="merchantShortId" nz-input formControlName="merchantShortId" placeholder="请输入商户号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">订单状态</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择订单状态" formControlName="status">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="成功" nzValue="1"></nz-option>
              <nz-option nzLabel="待支付" nzValue="0"></nz-option>
              <nz-option nzLabel="关闭" nzValue="2"></nz-option>
              <nz-option nzLabel="撤单" nzValue="3"></nz-option>
              <nz-option nzLabel="部分退款" nzValue="6"></nz-option>
              <nz-option nzLabel="全额退款" nzValue="7"></nz-option>
              <nz-option nzLabel="退款中" nzValue="8"></nz-option>
              <nz-option nzLabel="退款失败" nzValue="9"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item margin-bottom" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"
         [ngClass]="isMobile? '': 'padding-left'" >
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>
  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="statis">
    <span class="item">
      普通分账：<span class="text-red">{{stateLedgerTotal?stateLedgerTotal:0}}元</span>
    </span>
    <span class="item">
      抖音美团核销手续费： <span class="text-red">{{stateTippingTotal?stateTippingTotal:0}}元</span>
    </span>

  </div>
  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>订单号</th>
      <th>场地</th>
      <th>运营商</th>
      <th>收款商户</th>
      <th>订单金额</th>
      <th>分账金额</th>
      <th>成本金额</th>
      <th>承担支付手续费</th>
      <th>分账比例</th>
      <th>订单类型</th>
      <th>分账类型</th>
      <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>
          <div>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
          <div>{{ data.outTradeNo }}</div>
        </td>
        <td nzEllipsis>{{ data.storeName }}</td>
        <td nzEllipsis>
          <div>{{ data.username}}</div>
          <div>{{ data.mobile}}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.merchantShortName}}</div>
          <div>{{ data.merchantShortId}}</div>
        </td>
        <td nzEllipsis>{{ data.totalAmount }}</td>
        <td nzEllipsis>{{ data.money }}</td>
        <td nzEllipsis>{{ data.costAmount }}</td>
        <td nzEllipsis>{{ data.handlingCharge }}</td>
        <td nzEllipsis>{{ data.rate?data.rate*100+'%': null }}</td>
        <td nzEllipsis>
          <div *ngIf="data.orderType == 1">普通订单</div>
          <div *ngIf="data.orderType == 2">活动订单</div>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.ledgerType == 1">普通分账</div>
          <div *ngIf="data.ledgerType == 2">抖音美团核销手续费</div>
        </td>
        <td nzEllipsis>
          <div>
            <span [ngStyle]="{'color':'#f50'}" *ngIf="data.status == 0">未付款</span>
            <span [ngStyle]="{'color':'#87d068'}" *ngIf="data.status == 1">支付成功</span>
            <span [ngStyle]="{'color':'#2db7f5'}" *ngIf="data.status == 2">订单关闭</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 3">订单撤销</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 4">订单退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 6">部分退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 7">全额退款</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 8">退款中</span>
            <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status == 9">退款失败</span>
          </div>
        </td>
      </tr>

    </ng-container>
    </tbody>
  </nz-table>
</div>
